{% extends 'base.html' %}

{% block title %}
    学院请假审批管理系统
{% endblock title %}

{% block style %}
    <style>
        #backdrop-filter {
            background-color: #aaa3;
        }
        #welcome {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: 38px;
            background-color: #fffa;
            box-shadow: black 3px 3px 8px;
        }
    </style>
{% endblock style %}

{% block body %}
    <div class="container">
        <h1 id="welcome" class="rounded-4 p-5 w-50" style="letter-spacing: 16px;">请假审批管理系统</h1>
    </div>
    
    <div id="carousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="2500">
                <img src="/static/img/img01.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item" data-bs-interval="2500">
                <img src="/static/img/img02.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item" data-bs-interval="2500">
                <img src="/static/img/img03.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item" data-bs-interval="2500">
                <img src="/static/img/img04.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item" data-bs-interval="2500">
                <img src="/static/img/img05.jpg" class="d-block w-100">
            </div>
        </div>
    </div>
{% endblock body %}
